<template>
  <div class="header-wrapper">
    <header class="new-header">
      <div class="logo-container">
        <router-link to="/index" class="logo-link">
          <img src="@/assets/logo.png" alt="杰杰去哪儿 Logo" class="header-logo">
          <div class="main-title">杰杰去哪儿</div>
        </router-link>
      </div>
      <div class="search-bar-container">
        <el-input placeholder="搜索任何旅游相关" v-model="searchQuery" class="search-input">
          <template #append>
            <el-button><el-icon><Search/></el-icon></el-button>
          </template>
        </el-input>
      </div>
      <div class="actions-container">
        <template v-if="isLoggedIn">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar :src="userAvatar" :size="24" style="margin-right:6px;" v-if="userAvatar" />
              <el-avatar :size="24" style="margin-right:6px;" v-else icon="UserFilled" />
              {{ userName || '尊贵的用户' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu class="user-dropdown-menu">
                <div class="dropdown-header">
                  <el-avatar :src="userAvatar" :size="50" v-if="userAvatar" />
                  <el-avatar :size="50" v-else icon="UserFilled" />
                  <div class="user-info">
                    <h4>{{ userName || '尊敬的会员' }} <el-icon><ArrowRight/></el-icon></h4>
                    <span>普通会员</span>
                  </div>
                </div>
                <el-dropdown-item :icon="Coin" command="my-points">我的积分</el-dropdown-item>
                <el-dropdown-item :icon="Wallet" command="my-wallet">我的钱包</el-dropdown-item>
                <el-dropdown-item :icon="Star" command="my-stars">我的收藏</el-dropdown-item>
                <el-dropdown-item :icon="Document" command="my-info">常用信息</el-dropdown-item>
                <el-dropdown-item :icon="Shop" command="member-store">会员商城</el-dropdown-item>
                <el-dropdown-item :icon="CreditCard" command="co-op-card">合作卡</el-dropdown-item>
                <el-dropdown-item :icon="SwitchButton" divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
           <el-button type="primary" plain class="login-btn" @click="login">登录</el-button>
           <el-button text @click="to('/register')">注册</el-button>
        </template>

        <el-divider direction="vertical" />
        
        <el-dropdown trigger="click" @command="handleOrderCommand">
          <el-button text>我的订单 <el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
          <template #dropdown>
            <el-dropdown-menu class="order-dropdown-menu">
              <el-dropdown-item :icon="OfficeBuilding" command="hotel-orders">酒店订单</el-dropdown-item>
              <el-dropdown-item :icon="Suitcase" command="travel-orders">旅游订单</el-dropdown-item>
              <el-dropdown-item :icon="Ticket" command="ticket-orders">景点门票订单</el-dropdown-item>
              <el-dropdown-item :icon="List" command="all-orders">全部订单</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-button text>联系客服</el-button>
        <el-badge :value="1" class="item">
          <el-button text>通知</el-button>
        </el-badge>
        <el-button text circle><el-icon><MessageBox /></el-icon></el-button>
        <el-button text circle><el-icon><Service /></el-icon></el-button>
      </div>
    </header>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  Search, User, MessageBox, Service, Avatar, ArrowDown, ArrowRight,
  Coin, Wallet, Star, Document, Shop, CreditCard, SwitchButton,
  Promotion, OfficeBuilding, Suitcase, Tickets, List, Cellphone
} from '@element-plus/icons-vue';

const router = useRouter();
const isLoggedIn = ref(false);
const userName = ref('');
const userAvatar = ref('');

const to = (path) => {
  router.push(path);
};

const login = () => {
  router.push('/login');
};

const handleCommand = (command) => {
  if (command === 'logout') {
    isLoggedIn.value = false;
    userName.value = '';
    userAvatar.value = '';
    sessionStorage.removeItem('userName');
    sessionStorage.removeItem('userAvatar');
  } else {
    // Handle other commands
    console.log('Command:', command);
  }
};

const handleOrderCommand = (command) => {
  if (command === 'hotel-orders') {
    router.push('/user/hotel-orders'); // 跳转到Hoteldd.vue
  }
  // 你可以继续加其它订单类型的跳转
};

const searchQuery = ref('');

onMounted(() => {
  const name = sessionStorage.getItem('userName');
  const avatar = sessionStorage.getItem('userAvatar');
  if (name) {
    isLoggedIn.value = true;
    userName.value = name;
    userAvatar.value = avatar || '';
  }
});
</script>

<style scoped>
.header-wrapper {
  background-color: #fff;
}
.new-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.logo-container {
  /* display: flex; */ /* This will be removed */
  align-items: center;
  gap: 10px;
}

.header-logo {
  padding-right: 5px;
  height: 35px;
  vertical-align: middle;
}

.logo-container .main-title {
  font-size: 28px;
  font-weight: bold;
  color: #0066ff;
  background: linear-gradient(to right, #0066ff, #00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.search-bar-container {
  width: 400px;
}

.search-input {
  --el-input-border-radius: 20px;
}

.actions-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.actions-container .el-divider--vertical {
  height: 20px;
  margin: 0 8px;
}

.login-btn {
  border-radius: 16px;
}

.actions-container .el-button--text {
  color: #555;
  font-size: 14px;
}

.actions-container .el-button--text:hover {
  color: #0086f6;
}

.actions-container .item {
  margin-right: 10px;
  margin-left: 5px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  background-color: #f0f8ff;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
}

.el-dropdown-link .el-icon:first-child {
  margin-right: 8px;
}

.user-dropdown-menu .dropdown-header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}
.user-dropdown-menu .user-info {
  margin-left: 15px;
}
.user-dropdown-menu .user-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.user-dropdown-menu .user-info span {
  font-size: 12px;
  color: #fff;
  background-color: #007bff;
  padding: 2px 6px;
  border-radius: 8px;
}

.logo-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}
</style>

<style>
.user-dropdown-menu {
  width: 240px !important;
  border-radius: 8px !important;
  padding: 0 !important;
}
.order-dropdown-menu {
  width: 180px !important;
}
</style>
